<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>ajaxDemo</title>
  </head>
  <body>
    <p>详细流程f12，查看控制台消息</p>
    <p>使用表单提交在后台返回数据前，刷新按钮是旋转的，后台响应数据后会直接跳转，逻辑由后台控制</p>
    <p>使用ajax提交页面不会锁死，页面仍可操作，比如刷新页面，返回数据在回调函数中可以接收到</p>
    <form id="formid"  name= "myform" method = 'post'  action = 'Syncres.php' >
    <input type="text" id="name" name="name" value="" placeholder="名字">
    <input type="text" id="age" name="age" value="" placeholder="年龄">
    <button type="submit" name="button">表单提交（同步请求）</button>
    </form>

    <button onclick="postData()">ajax提交（异步请求）</button>
    
    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>
    <script type="text/javascript">
      function postData () {
        window.console && window.console.log && console.log("%c点击了提交按钮,开始发送数据", "color:red");
        console.log('等待数据返回。。。（期间页面仍可以自由操作） \n。\n。\n。');
        $.ajax({
          url:'ajaxres.php',
          type:"POST",
          data:{
            name:$('#name').val(),
            age:$('#age').val()
          },
          dataType:'json',
          timeout:30000,
          success:function(data){
            window.console && window.console.log && console.log('%c数据返回成功，以下是返回的json数据','color:red');
            console.log(JSON.stringify(data));

          },
          error:function (err){
            window.console && window.console.log && console.log('%c数据返回失败，以下是错误详情','color:red');
            console.log(JSON.stringify(err));
          }
        })
      }
    </script>
  </body>
</html>
